import { Tabs, Button } from 'antd';
import styles from './index.less'
import React from 'react';
import CommonFooter from '@/components/CommonFooter';

const { TabPane } = Tabs;

class Demo extends React.Component {
    state = {
        tabPosition: 'left',
    };

    changeTabPosition = (e: { target: { value: any; }; }) => {
        this.setState({ tabPosition: e.target.value });
    };

    render() {
        const { tabPosition } = this.state;
        return (
            <>
                <Tabs tabPosition={tabPosition}>
                    <TabPane tab="系统设置" key="1">
                        <ul>
                            <li>
                                <p>系统地址</p>
                                <input type="text" defaultValue='creation.shbwyz.com' />
                            </li>
                            <li>
                                <p>后台地址</p>
                                <input type="text" defaultValue='creationadmin.shbwyz.com' />
                            </li>
                            <li>
                                <p>系统标题</p>
                                <input type="text" defaultValue='创作平台' />
                            </li>
                            <li>
                                <p>Logo</p>
                                <input type="text" defaultValue='<img height="36" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-20/wipi-logo.png" alt="logo">' />
                            </li>
                            <li>
                                <p>Logo</p>
                                <input type="text" defaultValue='<img height="36" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-20/wipi-logo.png" alt="logo">' />
                            </li>
                            <li>
                                <p>Favicon</p>
                                <input type="text" defaultValue='https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-20/wipi-favicon.png' />
                            </li>
                            <li>
                                <p>页脚信息</p>
                                <input type="text" className={styles.inp} defaultValue='创作平台<script>
                                    var _hmt = _hmt || [];
                                    (function() {
                                      var hm = document.createElement("script");
                                      hm.src = "https://hm.baidu.com/hm.js?fade94cd152eaf9e2d7990ffcd3be68f";
                                      var s = document.getElementsByTagName("script")[0]; 
                                      s.parentNode.insertBefore(hm, s);
                                    })();'/>
                            </li>
                        </ul>
                    </TabPane>
                    <TabPane tab="国际化设置" key="2">
                        Content of Tab 2
          </TabPane>
                    <TabPane tab="SEO设置" key="3">
                       <ul>
                           <li>
                               <p>关键词</p>
                               <input type="text" placeholder='请输入关键词,空格分隔'/>
                           </li>
                           <li>
                               <p>描述信息</p>
                               <input type="text" className={styles.inp1} placeholder='请输入描述信息'/>
                           </li>
                           <li>
                           <Button type="primary">保存</Button>
                           </li>
                       </ul>
          </TabPane>
                    <TabPane tab="数据统计" key="4">
                    <ul>
                           <li>
                               <p>百度统计</p>
                               <input type="text" defaultValue='8bd099eec64421b1831043373289e0cb'/>
                           </li>
                           <li>
                               <p>谷歌分析</p>
                               <input type="text" placeholder='请输入谷歌分析ID'/>
                           </li>
                           <li>
                           <Button type="primary">保存</Button>
                           </li>
                       </ul>
          </TabPane>
                    <TabPane tab="OSS设置" key="5">
                        Content of Tab 3
          </TabPane>
                    <TabPane tab="SMTP服务" key="6">
                        <ul>
                            <li>
                                <p>SMTP 地址</p>
                                <input type="text" defaultValue='smtp.163.com'/>
                            </li>
                            <li>
                                <p>SMTP 端口（强制使用 SSL 连接）</p>
                                <input type="text" defaultValue='465'/>
                            </li>
                            <li>
                                <p>SMTP 用户</p>
                                <input type="text" defaultValue='bwbjwz@163.com'/>
                            </li>
                            <li>
                                <p>SMTP 密码</p>
                                <input type="text" defaultValue='MIQGCLSXRSZQNNPO'/>
                            </li>
                            <li>
                                <p>发件人</p>
                                <input type="text" defaultValue='bwbjwz@163.com'/>
                            </li>
                            <li>
                            <Button type="primary">保存</Button>
                            <Button>测试</Button>
                            </li>
                        </ul>
          </TabPane>
                </Tabs>
            </>
        );
    }
}
export default function userList() {
    return (<div className={styles.setting}>
        <div className={styles.inner}>
            <Demo></Demo>
        </div>
        <CommonFooter />
    </div>)
}